<template>
	<view class="wrap">
    <view class="cell">
      <input type="text" :value="addressInfo.realName" maxlength="5" placeholder="姓名" placeholder-class="placeholder" @input="onTextInput" data-name="realName"/>
    </view>
		<view class="cell">
		  <input type="number" :value="addressInfo.phone" maxlength="11" placeholder="手机号码" placeholder-class="placeholder"　data-name="phone" @input="onTextInput" />
      <text>+86</text>
      <text class="iconfont icon-xiangyou"></text>
		</view>
    <view class="cell">
      <picker mode="region" class="value" @change="onReginChange">{{addressInfo.district ? (addressInfo.province + '-' + addressInfo.city + '-' + addressInfo.district) : '选择地区'}}</picker>
      <text class="iconfont icon-xiangyou"></text>
    </view>
    <textarea :value="addressInfo.address" placeholder="详细地址:如道路、" data-name="address" @input="onTextInput" maxlength="100" />
    <view class="cell">
      <text class="label">标签</text>
      <view class="tags">
        <text :class="addressInfo.tag === 1 ? 'selected' : ''" @click="selectTag(1)">默认</text>
        <text :class="addressInfo.tag === 2 ? 'selected' : ''" @click="selectTag(2)">家</text>
        <text :class="addressInfo.tag === 3 ? 'selected' : ''" @click="selectTag(3)">公司</text>
        <text :class="addressInfo.tag === 4 ? 'selected' : ''" @click="selectTag(4)">学校</text>
      </view>
    <button type="primary" class="btn-save" :disabled="!addressInfo.realName || !addressInfo.phone || !addressInfo.district || !addressInfo.address" @click="save">保存</button>
	</view>
</view>
</template>

<script>
  import {utils} from './../../utils/index'
  import {Address} from '../../apis/index'
  
	export default {
		data() {
			return {
        options: {},
        isLoading: false,
        cityInfo: [],
				addressInfo: {
          tag: null,
          realName: '',
          phone: '',
          province: '',
          city: '',
          district: '',
          address: ''
        }
			};
		},
    onLoad (options) {
      this.options = options
      options.id && getAddressInfo.call(this)
    },
    methods: {
      onReginChange (e) {
         let [province, city, district] = e.detail.value
         this.addressInfo.province = province
         this.addressInfo.city = city
         this.addressInfo.district = district
         
      },
      onTextInput (e) {
        this.addressInfo[e.currentTarget.dataset.name] = e.detail.value.trim()
      },
      selectTag (tag) {
        console.log('选择标签', tag)
        this.addressInfo.tag = tag
      },
      save () {
        let msg = validateForm.call(this)
        if (msg) {
          utils.wxToast(msg)
          return
        }
        if (this.isLoading) return
        this.isLoading = true
        utils.wxLoading('加载中...')
        let funcName = this.options.id ? 'updateAddress' : 'addAddress'
        const userInfo = uni.getStorageSync('userInfo')
        this.addressInfo.userId = userInfo.id
        Address[funcName]({
          data: {
            form: this.addressInfo
          }
        }).then(res => {
          if (res.data.code === 200) {
            utils.wxToastSuccess('操作成功', () => utils.routerBack())
          }
          this.isLoading = false
          wx.hideLoading()
        }, err => {
          console.error(err)
          this.isLoading = false
          wx.hideLoading()
        })
      }
    }
	}
  
  function validateForm () {
    let {phone} = this.addressInfo
    if (!(/^1[3456789]\d{9}$/.test(phone)))
     return '手机号格式错误'
  }
  function getAddressInfo () {
    Address.getAddressDetail({
      data: {
        query: {
          id: this.options.id
        }
      }
    }).then(res => {
      console.log('获取地址详情成功')
      console.log(res.data)
      if (res.data.code === 200) {
        this.addressInfo = res.data.body
      } else {
        utils.wxToastFail('获取数据失败')
      }
    }, err => {
      console.error(err)
    })
  }
</script>

<style lang="scss">
  .wrap {
    margin-top: 20rpx;
  }
 .cell {
   width: 100%;
   height: 100rpx;
   display: flex;
   box-sizing: border-box;
   align-items: center;
   font-size: 28rpx;
   border-top: #EFEFEF 1rpx solid;
   padding: 0 20rpx;
   .value {
     flex: 1;
   }
   input {
     flex: 1;
     padding-right: 10rpx;
     line-height: 100rpx;
   }
   .label {
     width: 200rpx;
   }
   .tags {
     flex: 1;
     text {
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 20rpx;
        border: #C0C0C0 1rpx solid;
        font-size: 24rpx;
        color: #C0C0C0;
        padding: 5rpx 20rpx;
        margin: 0 10rpx;
        width: 200rpx;
        &.selected {
          background-color: #409eff;
          color: #FFF;
          border: unset;
        }
     }
   }
 }
 textarea {
  box-sizing: border-box;
  padding: 20rpx;
  font-size: 28rpx;
  border-top: #EFEFEF 1rpx solid;
  width: 100%;
 }
 .btn-save {
   width: 710rpx;
   position: absolute;
   bottom: 100rpx;
   left: 20rpx;
   height: 80rpx;
   line-height: 80rpx;
 }
</style>
